<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="page">
        <div class="menu"></div>
        <ul class="btn-group">
            <li>
                <div id="a1" class="btn">xxx</div>
            </li>
            <li>
                <div id="a2" class="btn">yyy</div>
            </li>
            <li>
                <div id="a3" class="btn">zzz</div>
            </li>
        </ul>
    </div>
    <style>
        .btn-group {
            width: 100px;
            list-style: none;
        }

        .btn {
            border: red solid 2px;
        }

        * {
            margin: 0;
        }

        .page {
            width: 100%;
            height: 100vh;
            background-color: chocolate;
        }

        .menu {
            width: 120px;
            height: 180px;
            background-color: #fff;
            position: fixed;
            top: 10px;
            left: 10px;
            visibility: hidden;
        }
    </style>
    <script>
        let page = document.querySelector(".page")
        let menu = document.querySelector(".menu")
        page.addEventListener("contextmenu", (e) => {
            e.preventDefault();
            //  e.clientx + menu.width < page.width .没问题
            console.log(e.clientX)
            // console.log(window.getComputedStyle(menu).width)
            let menuWidth = parseInt(window.getComputedStyle(menu).width);
            let pageWidth = parseInt(window.getComputedStyle(page).width);
            console.log(menuWidth, pageWidth)
            if (e.clientX + menuWidth < pageWidth) {
                menu.style.left = e.clientX + "px";
                menu.style.top = e.clientY + "px";
                menu.style.visibility = "visible";
            } else {
                menu.style.left = (pageWidth - menuWidth) + "px";
                menu.style.top = e.clientY + "px";
                menu.style.visibility = "visible";
            }


        })
        menu.addEventListener("click", (e) => {
            console.log("menu wait");
            e.stopPropagation();
        });
        page.addEventListener("click", (e) => {
            menu.style.visibility = "hidden";
        })
        // 事件委托 本来 事件应该绑定A标签上，结果程序员绑定到A的父标签上。
        let btnGroup = document.querySelector(".btn-group")
        btnGroup.addEventListener("click", (e) => {
            console.log(e.target)
            if (e.target.id === "a1") {
                console.log("a1")
            } else if (e.target.id === "a2") {
                console.log("a2")
            } else if (e.target.id === "a3") {
                console.log("a3")
            }
        })
    </script>
</body>